<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="main-header">
        <div class="header-left">
          <img src="../assets/logo.png" alt="" class="logo-img">
          <span class="site-title">英雄联盟皮肤销售网站</span>
          <span class="nav-link" @click="$router.push('/')">首页</span>
          <span class="nav-link" v-if="user.role === 'ROLE_USER'" @click="$router.push('/personallog')">我的日志</span>
        </div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-user"></i>
            {{user.name}}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="persional">个人中心</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <!-- 侧边栏菜单 -->
        <el-aside class="main-aside" width="210px">
          <el-menu
            :default-active="$route.path"
            router
            background-color="#232f3e"
            text-color="#fff"
            active-text-color="#ffd04b"
            class="aside-menu"
          >
            <el-menu-item index="/admin" v-if="user.role === 'ROLE_ADMIN'">
              <i class="el-icon-user-solid"></i> 用户管理
            </el-menu-item>
            <el-menu-item index="/notice">
              <i class="el-icon-menu"></i> 系统公告
            </el-menu-item>
            <el-menu-item index="/book">
              <i class="el-icon-s-management"></i> 普通皮肤
            </el-menu-item>
            <el-menu-item index="/live">
              <i class="el-icon-s-shop"></i> 史诗皮肤
            </el-menu-item>
            <el-menu-item index="/schoolsupplies">
              <i class="el-icon-edit"></i> 传说皮肤
            </el-menu-item>
            <el-menu-item index="/othergoods">
              <i class="el-icon-more"></i> 限定皮肤
            </el-menu-item>
            <el-submenu index="reserve">
              <template slot="title">
                <i class="el-icon-s-claim"></i>
                <span>预定管理</span>
              </template>
              <el-menu-item index="/reservebook">普通皮肤预定管理</el-menu-item>
              <el-menu-item index="/reservelive">史诗皮肤预定管理</el-menu-item>
              <el-menu-item index="/reservestudy">传说皮肤预定管理</el-menu-item>
              <el-menu-item index="/reserve">限定皮肤预定管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="main-content">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
    }
  },
  methods: {
    logout() {
      localStorage.removeItem("user")
      this.$router.push("/login")
    },
    persional() {
      this.$router.push('/persional')
    }
  }
}
</script>

<style scoped>
.main-header {
  background-color: #232f3e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  box-shadow: 0 2px 8px #e6e6e6;
  padding: 0 32px 0 18px;
}
.header-left {
  display: flex;
  align-items: center;
}
.logo-img {
  width: 38px;
  margin-right: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px #e6e6e6;
}
.site-title {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}
.nav-link {
  color: #fff;
  margin-left: 32px;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 2px 8px;
  border-radius: 4px;
}
.nav-link:hover {
  color: #ffd04b;
  background: rgba(255,255,255,0.08);
}
.el-dropdown-link {
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}
.el-dropdown-link:hover {
  background: rgba(255,255,255,0.08);
}
.main-aside {
  background-color: #232f3e;
  min-height: calc(100vh - 58px);
  box-shadow: 2px 0 8px #e6e6e6;
}
.aside-menu {
  border-right: none !important;
  font-size: 15px;
  background: transparent;
}
.el-menu-item, .el-submenu__title {
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 6px;
  margin: 4px 8px;
  transition: background 0.2s;
}
.el-menu-item:hover, .el-submenu__title:hover {
  background: #1a2230 !important;
}
.el-menu-item.is-active {
  background: linear-gradient(90deg, #409EFF 60%, #ffd04b 100%) !important;
  color: #fff !important;
}
.main-content {
  background: #f5f7fa;
  padding: 28px 18px 24px 18px;
  min-height: 100vh;
}
@media (max-width: 900px) {
  .main-header {
    flex-direction: column;
    height: auto;
    padding: 8px 6px;
  }
  .main-aside {
    width: 100px !important;
    min-width: 80px;
  }
  .site-title {
    font-size: 16px;
  }
  .nav-link {
    margin-left: 12px;
    font-size: 14px;
  }
  .main-content {
    padding: 8px 2px 12px 2px;
  }
}
</style>